<template>
  <VPrint ref="printRef" id="printPay" title="付款申请书" width="900px">
    <div class="flex flex-col border-l border-t text-gray-950">
      <div class="border-b border-r px-2">
        <div class="text-center font-bold" style="font-size: 30px;">{{ form.company_id_name }}</div>
        <div class="text-center font-bold" style="font-size: 30px;">付款申请书</div>
        <div class="flex mt-3">
          <div class="ml-auto w-1/3">{{ form.apply_date }}</div>
          <div class="w-20">字</div>
          <div class="w-10">号</div>
        </div>
      </div>
      <div class="flex">
        <div class="grid grid-cols-8  flex-1">
          <div class="col-span-2 border-b border-r p-2 text-center">收款单位</div>
          <div class="col-span-6 border-b border-r p-2">{{ form.collect_bank }}</div>
          <div class="col-span-2 border-b border-r p-2 text-center">账号</div>
          <div class="col-span-6 border-b border-r p-2">{{ form.collect_account }}</div>
          <div class="col-span-2 border-b border-r p-2 text-center">开户行</div>
          <div class="col-span-6 border-b border-r p-2">{{ form.collect_bank }}</div>
          <div class="col-span-2 border-b border-r p-2 text-center">金额</div>
          <div class="col-span-6 border-b border-r p-2">人民币 {{ form.chinese_price }} 零元整</div>
          <div class="col-span-4 border-b border-r p-2 text-center">附件 1 张</div>
          <div class="col-span-2 border-b border-r p-2 text-center">RMB</div>
          <div class="col-span-2 border-b border-r p-2">{{ form.apply_price }}</div>
          <div class="col-span-4 h-44 border-b border-r p-2">
            <div class="w-1 break-all mt-14">审批</div>
          </div>
          <div class="col-span-4 h-44 row-span-4 border-b border-r p-2">
            <div class="w-1 break-all mt-14">财务</div>
          </div>
        </div>
        <div class="border-b border-r p-2" style="flex: 0 0 300px;">
          <div class="flex justify-between">
            <span>付</span>
            <span>款</span>
            <span>原</span>
            <span>因</span>
          </div>
          <div class="mt-2">付款申请号: {{ form.payment_no }}</div>
          <div>货款: {{ form.apply_price }}元</div>
          <div>事业处: </div>
          <div>日期: {{ form.except_payment_time }}</div>
        </div>
      </div>
      <div class="border-b border-r p-2 grid grid-cols-12">
        <div class="col-span-3">会计主管</div>
        <div class="col-span-1">记账</div>
        <div class="col-span-2">复核</div>
        <div class="col-span-2">出纳</div>
        <div class="col-span-2">制单</div>
        <div class="col-span-2">签收</div>
      </div>
    </div>
  </VPrint>
</template>

<script setup>
import VPrint from '@/components/VPrint'
import api from '../api'

const form = ref({})
const printRef = ref()
const getForm = async (p_id) => {
  const res = await api.printPayment({ p_id })
  form.value = res.data
}
const view = (p_id) => {
  printRef?.value.view()
  getForm(p_id)
}
const print = async (p_id) => {
  await getForm(p_id)
  printRef?.value.print()
}

defineExpose({ view, print })
</script>